<template>
  <div>
    <el-container style="height: 500px;">
      <!--      侧边栏-->
      <el-aside  class="m-aside">
        <!--        logo和系统名称-->
        <div class="m-sysName" >
          <img src="@/assets/logo.png" alt="" width="10%">
          <span class="m-nameText">博物馆参观预约系统</span>
        </div>
        <!--        侧边菜单栏-->
        <!-- 设置路由跳转页面-->
        <el-menu class="el-menu" :default-active="$route.path" router >
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-monitor"></i>系统首页</template>
            <!-- 在index里面写路由-->
            <el-menu-item index="/manager/home">系统首页</el-menu-item>
          </el-submenu>

          <el-submenu index="2" v-if="user.role === 1" >
            <template slot="title"><i class="el-icon-user"></i>用户管理</template>
            <el-menu-item index="/manager/admin">管理员管理</el-menu-item>
            <el-menu-item index="/manager/user">用户管理</el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title"><i class="el-icon-news"></i>在线预约</template>
            <el-menu-item index="/manager/activity">活动管理</el-menu-item>
            <el-menu-item index="/manager/record"  >预约管理</el-menu-item>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title"><i class="el-icon-tickets"></i>博物资讯</template>
            <el-menu-item  index="/manager/news">博物资讯</el-menu-item>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title"><i class="el-icon-thumb"></i>展馆介绍</template>
            <el-menu-item index="/manager/introduce">展馆介绍</el-menu-item>
          </el-submenu>

          <el-submenu index="6">
            <template slot="title"><i class="el-icon-chat-line-round"></i>留言与评论</template>
            <el-menu-item index="/manager/comment">评论管理</el-menu-item>
            <el-menu-item index="/manager/message">留言管理</el-menu-item>
          </el-submenu>



          <el-submenu index="7">
            <template slot="title"><i class="el-icon-set-up"></i>系统设置</template>
            <el-menu-item index="/manager/password">修改密码</el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>
      <!--      右侧-->
      <el-container class="right-container">
        <!--        顶部菜单栏-->
        <el-header class="top-header">
          <!--用户头像-->
          <img :src="user.avatar" alt="" style="width: 40px; height:40px;border-radius: 50%;margin-right: 10px;">
          <!--  展示个人信息-->
          <span style="color: #4c5a73;font-weight: bold;font-size: 14px;margin-right: 20px">欢迎您，{{ user.userName }}</span>

          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <div @click="goToPerson()"><el-dropdown-item  >个人中心</el-dropdown-item></div>
              <div @click="logout()"><el-dropdown-item  >退出登录</el-dropdown-item></div>
            </el-dropdown-menu>
          </el-dropdown>

        </el-header>
        <!--表单-->
        <el-main >
          <div>
            <router-view/>
          </div>
        </el-main>

      </el-container>
    </el-container>

  </div>
</template>
<!--退出登录-->
<script>
import request from "@/utils/request";
import "@/assets/view.css"

export default {
  name: "ManagerLayout",

  data () {
    return {
      // 定义User对象，从缓存里取值
      user: JSON.parse(localStorage.getItem("user") || {}),
    }
  },



  methods: {
// 退出登录方法
    logout() {
      localStorage.removeItem("user");
      this.$router.push("/login");
    },
    //跳转哪个个人中心
    goToPerson() {
      if (this.user.role === 1) {
        this.$router.push("/manager/pAdmin")
      }
      if (this.user.role === 2) {
        this.$router.push("/manager/pUser")
      }

    },
  },



}
</script>